<template>
  <div>
    <div class="nationTitle">
      <div class="title">记录</div>
    </div>
    <el-row :gutter="20" v-for="item in recode">
      <el-col :span="6" v-for="item_Children in item"
        ><div class="grid-content bg-purple" />
        <!-- 卡片UI 开始 -->
        <a-card
          hoverable
          tyle="width: 300px"
          @click="open(item_Children.children[0].model.resource.web_url)"
        >
          <template #cover>
            <img
              alt="example"
              :src="item_Children.children[0].model.resource.cover"
            />
          </template>

          <a-card-meta
            :title="item_Children.children[0].model.resource.title"
            :description="
              item_Children.children[0].model.resource.author.userinfo.username
            "
          >
            <template #avatar>
              <a-avatar
                :src="
                  item_Children.children[0].model.resource.author.userinfo
                    .avatar
                "
              />
            </template>
          </a-card-meta>
        </a-card>
        <!-- 卡片UI 结束 -->
      </el-col>
    </el-row>
  </div>
</template>



<script  setup>
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import { defineComponent } from "vue";
import { recode, open, getrecode } from "./unidata";

defineComponent({
  components: {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
  },
});
getrecode();
</script>
<style scoped>
.nationTitle {
  height: auto;
  width: 100vw;
}
.nationTitle .title {
  display: flex;
  font-size: 40px;
  border-bottom: 1px solid;
}
</style>